<template>
  <div>
    <n-card :bordered="false">
      <!-- 页面标题和操作栏 -->
      <div class="header-bar">
        <h2>虚拟AGV添加</h2>
        <n-button type="primary" :loading="loading" @click="handleAddsimulation">添加仿真</n-button>
      </div>
      <n-data-table :loading="loading" :columns="columns" :data="dataList" :pagination="pagination" />
      <n-flex justify="end">
        <n-button class="text_size" type="info" :loading="loading" @click="fetchList">刷新数据</n-button>
        <n-tag class="text_size">每页显示数据量</n-tag>
        <n-select class="text_size" v-model:value="pagination.pageSize" :options="options" />
      </n-flex>
    </n-card>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, h, onMounted } from "vue";
import { NCard, NTag, NInputNumber, NButton, NSelect, NFlex, NDataTable, NLayout, useMessage } from "naive-ui";
import { API_URLS } from '../../utils/apiConfig';
import { useRouter } from 'vue-router';

const message = useMessage();
const router = useRouter();

//每页显示数据 选择项
const options = [
  {
    label: "5条",
    value: 5,
  },
  {
    label: "10条",
    value: 10,
  },
];
// 分页参数
const pagination = ref({
  pageSize: 10,
});
// 状态管理
const loading = ref(false);
const error = ref(null);
// agv car_index list参数datatable
const dataList = ref([]);

// 获取所有虚拟AGV列表数据
const fetchList = async () => {
  loading.value = true;
  error.value = null;

  try {
    const response = await axios.get(API_URLS.agv.position, { params: { page: 1, page_size: 1000 } });

    if (response.data.code === 200) {
      dataList.value = response.data.data;
      console.log(dataList.value);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
  }
};

// 初始化页面
onMounted(() => {
  fetchList();
});

// 表格数据 列
const columns = [
  { title: "AGV编号", key: "car_index" },
  { title: "x轴坐标", key: "x" },
  { title: "y轴坐标", key: "y" },
  { title: "角度", key: "angle" },
  { title: "速度", key: "speed" },
  { title: "连接状态", key: "is_connected" },
  { title: "运行状态", key: "status" },
  { title: "电池电量", key: "battery" },
  { title: "虚拟设备", key: "simulation" },
  { title: "目标节点", key: "node_to_id_id" },
  {
    title: "删除",
    key: "delete",
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          tertiary: true,
          size: "small",
          type: "error",
          onClick: () => delete_row(row.id),
        },
        { default: () => "删除" }
      );
    },
  },
];

async function delete_row(id) {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.delete(API_URLS.agv.deletesimulation, {
      params: {
        id: id,
      },
    });

    if (response.data.code === 200) {
      console.log(response.data.msg);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
    //重新加载数据
    fetchList();
  }
}

// 新增仿真
const handleAddsimulation = () => {
  router.push("/AGV/AGV_simulation_add");
};

</script>

<style scoped>
.text_size {
  width: 120px;
  height: 30px;
  text-align: center;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
